<template>
  <section class="page page-home">
    <div class="main_top">
      <div class="main_top_wrap">
        <date-time
          :dateTime="form.dateTime"
          v-on:change-date-time="changeDateTime"
        ></date-time>
      </div>
    </div>
    <div class="main_content">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="chart_box">
            <div class="box_title">
              <h3>
                <span @click="pieBack" style="cursor:pointer;">工厂</span>
                <span v-if="show_process"> > 工位</span>
              </h3>
            </div>
            <div class="chart" id="pie_chart"></div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="chart_box">
            <div class="box_title">
              <h3>过滤器</h3>
              <!-- <div class="box_filter_box">
                巢穴：
                <el-select
                  class="box_filter"
                  size="mini"
                  v-model="nest_ids"
                  multiple
                  placeholder="请选择"
                  @change="boxChange(1)"
                >
                  <el-option
                    v-for="item in nest_list"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </div> -->
              <div class="box_filter_box">
                机床：
                <el-select
                  collapse-tags
                  class="box_filter"
                  size="mini"
                  v-model="machine_ids"
                  multiple
                  placeholder="请选择"
                  @change="boxChange(2)"
                >
                  <el-option
                    v-for="item in machine_list"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </div>
              <div class="box_filter_box">
                零件：
                <el-select
                  collapse-tags
                  class="box_filter"
                  size="mini"
                  v-model="part_ids"
                  multiple
                  placeholder="请选择"
                  @change="boxChange(3)"
                >
                  <el-option
                    v-for="item in part_list"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
            <!-- <div class="chart" id="box_chart1"></div> -->
            <div class="chart" id="box_chart2"></div>
            <div class="chart" id="box_chart3"></div>
          </div>
        </el-col>
        <!-- <el-col :span="12">
          <div class="chart_box">
            <div class="chart" id="scatter_chart"></div>
          </div>
        </el-col> -->
      </el-row>
      <!-- <el-row :gutter="20">
        <el-col :span="12">
          <div class="chart_box">
            <div class="box_title">过滤器</div>
            <div class="chart" id="box_chart1"></div>
            <div class="chart" id="box_chart2"></div>
            <div class="chart" id="box_chart3"></div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="chart_box" style="height: 190px">
            <div class="box_title">生产线1 - 可乐瓶 - 瓶子 - 局部最小值-力</div>
            <div class="chart" id="chart2"></div>
          </div>
          <div class="chart_box" style="height: 290px">
            <div class="box_title">曲线 - 行程 - 力 - 时间</div>
            <div class="chart" id="chart3"></div>
          </div>
        </el-col>
      </el-row> -->
    </div>
  </section>
</template>
<script>
import {
  getFanDiagrams,
  // getAnalyseNest,
  getMachineFlow,
  getAnalysePart,
  getProcessDiagram,
} from '@/api/analyse.js'
import DateTime from '@/components/DateTime'
export default {
  components: { DateTime },
  data() {
    return {
      form: {
        dateTime: [],
      },
      show_process: false,
      pages: this.$mpages,
      currentIndex: 0,
      currentFlexIndex: 0,
      navList: [
        {
          label: '总览',
        },
        {
          label: '监控超差',
        },
        {
          label: '测试理由',
        },
        {
          label: '新增',
        },
      ],
      nest_list: [],
      nest_ids: [],
      machine_list: [],
      machine_ids: [],
      part_list: [],
      part_ids: [],
    }
  },
  created() {
    // this.form.dateTime.push(this.formattime(new Date(), "yyyy.MM.dd hh:mm"));
    // this.form.dateTime.push(this.formattime(new Date(), "yyyy.MM.dd hh:mm", 1));

    const end_time = new Date().format('yyyy-MM-dd hh:mm:ss')
    let start = new Date()
    start.setTime(start.getTime() - 3600 * 1000 * 24)
    let start_time = new Date(start).format('yyyy-MM-dd hh:mm:ss')

    this.form.dateTime.push(start_time)
    this.form.dateTime.push(end_time)
  },
  mounted() {
    this.updatePage()
  },
  methods: {
    updatePage() {
      this.getFanDiagrams()
      // this.getAnalyseNest();
      this.getMachineFlow()
      this.getAnalysePart()
      // this.drawScatterChart();
    },
    changeDateTime(e) {
      this.form.dateTime = e
      this.updatePage()
    },
    // 请求扇形图
    async getFanDiagrams() {
      const res = await getFanDiagrams({
        startTime: this.form.dateTime[0],
        endTime: this.form.dateTime[1],
      })
      this.drawPieChart(res.data)
    },
    // 工位扇形图
    async getProcessDiagram() {
      const { data } = await getProcessDiagram({
        startTime: this.form.dateTime[0],
        endTime: this.form.dateTime[1],
      })
      this.drawProcessPieChart(data)
    },
    pieBack() {
      if (this.show_process) {
        this.show_process = false
        this.getFanDiagrams()
      }
    },
    // async getAnalyseNest() {
    //   const res = await getAnalyseNest({
    //     startTime: this.form.dateTime[0],
    //     endTime: this.form.dateTime[1],
    //   });
    //   this.nest_list = res.data;
    //   this.nest_ids = res.data.map((item) => {
    //     return item.id;
    //   });
    //   this.drawBoxChart(res.data, "box_chart1", this.nest_ids);
    // },
    async getMachineFlow() {
      const res = await getMachineFlow({
        startTime: this.form.dateTime[0],
        endTime: this.form.dateTime[1],
      })
      this.machine_list = res.data
      this.machine_ids = res.data.map((item) => {
        return item.id
      })
      this.drawBoxChart(res.data, 'box_chart2', this.machine_ids)
    },
    async getAnalysePart() {
      const res = await getAnalysePart({
        startTime: this.form.dateTime[0],
        endTime: this.form.dateTime[1],
      })
      this.part_list = res.data
      this.part_ids = res.data.map((item) => {
        return item.id
      })
      this.drawBoxChart(res.data, 'box_chart3', this.part_ids)
    },
    boxChange(type) {
      switch (type) {
        case 1:
          this.drawBoxChart(this.nest_list, 'box_chart1', this.nest_ids)
          break
        case 2:
          this.drawBoxChart(this.machine_list, 'box_chart2', this.machine_ids)
          break
        case 3:
          this.drawBoxChart(this.part_list, 'box_chart3', this.part_ids)
          break
      }
    },
    // 绘制扇形图
    drawPieChart(data) {
      this.$echarts.dispose(document.getElementById('pie_chart'))
      this.show_process = false
      let pie_chart = this.$echarts.init(document.getElementById('pie_chart'))
      // 不合格: "#F63F49",
      //           有条件合格: "#FDE361",
      //           合格: "#52C84E",
      let option = {
        color: ['#F63F49', '#FDE361', '#52C84E'],
        tooltip: {
          trigger: 'item',
          formatter: '{b}：{c}%',
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            label: {
              formatter: '{b}',
              // formatter: '{b}\n{c}%',
              fontSize: 16,
            },
            data: [
              { value: data[2].value, name: '不合格的检测参数' },
              { value: data[1].value, name: '有条件合格的检测参数' },
              { value: data[0].value, name: '合格的检测参数' },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      }
      pie_chart.setOption(option)
      pie_chart.on('click', (params) => {
        this.getProcessDiagram()
      })
    },
    // 绘制工位扇形图
    drawProcessPieChart(data) {
      this.$echarts.dispose(document.getElementById('pie_chart'))
      this.show_process = true
      let pie_data = []
      data.map((item) => {
        pie_data.push({ value: item.value, name: item.groupModel.name })
      })
      let pie_chart = this.$echarts.init(document.getElementById('pie_chart'))
      // 不合格: "#F63F49",
      //           有条件合格: "#FDE361",
      //           合格: "#52C84E",
      let option = {
        tooltip: {
          trigger: 'item',
          formatter: function(params) {
            let idx = params.dataIndex
            let vo = data[idx].groupModel
            return (
              '<h3>' +
              params.data.name +
              "</h3><br/><span style='color:red;'>不合格的检测参数：" +
              vo.disqualification +
              "%</span><br/><span style='color:orange;'>有条件合格的检测参数：" +
              vo.hasQualified +
              "%</span><br/><span style='color:green;'>合格的检测参数：" +
              vo.qualified +
              '%</span>'
            )
          },
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            data: pie_data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      }
      pie_chart.setOption(option)
    },
    // 绘制散点图
    drawScatterChart() {
      let scatter_chart = this.$echarts.init(
        document.getElementById('scatter_chart')
      )
      let data1 = [
        [110, 130, '次重要的', '有条件合格', '冷却'],
        [102, 110, '略重要的', '不合格', '冷却'],
        [104, 150, '重要的', '合格', '冷却'],
        [101, 140, '很重要的', '合格', '填充量'],
        [141, 140, '关键的', '合格', '冷却'],
        [161, 140, '关键的', '合格', '填充量'],
        [121, 140, '关键的', '合格', '冷却'],
      ]
      let data2 = [
        [81, 180, '次重要的', '有条件合格', '冷却'],
        [10, 109, '略重要的', '不合格', '冷却'],
        [16, 130, '重要的', '合格', '冷却'],
        [32, 56, '很重要的', '合格', '填充量'],
        [22, 30, '关键的', '合格', '冷却'],
        [105, 36, '次重要的', '合格', '填充量'],
        [46, 89, '关键的', '合格', '冷却'],
      ]
      let option = {
        color: ['#dd4444', '#fec42c', '#80F1BE'],
        grid: {
          left: '10%',
          right: '120',
          top: '10%',
          bottom: '10%',
        },
        legend: {
          top: '50%',
          right: 0,
          orient: 'vertical',
          align: 'right',
          data: ['冷却', '填充量'],
        },
        xAxis: {
          type: 'value',
          min: -200,
          max: 200,
        },
        yAxis: {
          type: 'value',
          min: -200,
          max: 200,
        },
        visualMap: [
          {
            bottom: '10%',
            right: 0,
            dimension: 2,
            categories: [
              '次重要的',
              '略重要的',
              '重要的',
              '很重要的',
              '关键的',
            ],
            // 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
            inRange: {
              symbolSize: 10,
              symbol: {
                次重要的: 'rect',
                略重要的: 'circle',
                重要的: 'triangle',
                很重要的: 'diamond',
                关键的: 'roundRect',
              },
            },
          },
          {
            top: '10%',
            right: 0,
            dimension: 3,
            categories: ['不合格', '有条件合格', '合格'],
            inRange: {
              color: {
                不合格: '#F63F49',
                有条件合格: '#FDE361',
                合格: '#52C84E',
              },
            },
          },
        ],
        series: [
          {
            name: '冷却',
            type: 'scatter',
            data: data1,
          },
          {
            name: '填充量',
            type: 'scatter',
            data: data2,
          },
        ],
      }

      scatter_chart.setOption(option)
    },
    // 绘制条形图
    drawBoxChart(res, id, ids) {
      let box_chart = this.$echarts.init(document.getElementById(id))
      let cate = []
      let disqualificationRateData = []
      let hasQualifiedRateData = []
      let qualifiedRateData = []

      function in_array(search, array) {
        for (var i in array) {
          if (array[i] == search) {
            return true
          }
        }
        return false
      }
      res.map((item) => {
        if (in_array(item.id, ids)) {
          cate.push(item.name)
          disqualificationRateData.push(item.disqualificationRate)
          hasQualifiedRateData.push(item.hasQualifiedRate)
          qualifiedRateData.push(item.qualifiedRate)
        }
      })
      let option = {
        xAxis: {
          type: 'category',
          data: cate,
          axisLabel: {
            interval: 0,
            width: 100,
            rotate: 45,
            overflow: 'truncate',
          },
        },
        tooltip: {
          trigger: 'axis',
        },
        yAxis: {
          min: 0,
          max: 100,
          type: 'value',
        },
        grid: {
          left: '10%',
          right: '10%',
          top: '10%',
          height: '40%',
          width: '80%',
        },
        series: [
          {
            name: '不合格的被测参数',
            data: disqualificationRateData,
            type: 'bar',
            stack: 'one',
            itemStyle: {
              color: '#F63F49',
            },
          },
          {
            name: '有条件合格的被测参数',
            data: hasQualifiedRateData,
            type: 'bar',
            stack: 'one',
            itemStyle: {
              color: '#FDE361',
            },
          },
          {
            name: '合格的被测参数',
            data: qualifiedRateData,
            type: 'bar',
            stack: 'one',
            itemStyle: {
              color: '#52C84E',
            },
          },
        ],
      }
      box_chart.setOption(option)
    },
    /* 页码改变 */
    pageChange(param) {
      if (param.type === 'index') this.pages.page = param.val
      if (param.type === 'sizes') this.pages.totalRow = param.val
      this.getList()
    },
  },
}
</script>

<style lang="scss" scoped>
.page-home {
  width: 100% !important;
  color: rgba(16, 16, 16, 100);
  font-family: SourceHanSansSC-regular;
  margin: auto 0 60px 0;
  .main_top {
    .nav_wrap {
      margin-top: 20px;
      display: flex;
      align-items: center;
      height: 48px;
      line-height: 48px;
      text-align: center;
      background: #3694ff;
      .nav_item {
        color: #fff;
        padding: 0px 20px;
        border-right: 1px solid #fff;
        cursor: pointer;
      }
      .nav_item:last-child {
        border-right: 0;
      }
      .nav_item.active {
        background-color: rgba(39, 97, 219, 100);
      }
      .nav_item:hover {
        background-color: rgba(39, 97, 219, 100);
      }
    }
    .flex_wrap {
      margin: 15px 15px 0 21px;
      border-radius: 4px;
      background-color: rgba(62, 62, 62, 100);
      .flex_box {
        height: 48px;
        padding: 0 13px;
        display: flex;
        align-items: center;
        .flex_item {
          display: flex;
          cursor: pointer;
          align-items: center;
          border-radius: 4px;
          border: 1px solid rgba(187, 187, 187, 100);
          font-size: 12px;
          color: #fff;
          padding: 8px;
          margin-right: 7px;
          img {
            vertical-align: middle;
            height: 16px;
          }
          .label {
            display: inline-block;
            height: 16px;
          }
        }
        .flex_item.active {
          background-color: rgba(54, 148, 255, 100);
          border: 1px solid rgba(54, 148, 255, 100);
        }
        .flex_item:hover {
          background-color: rgba(54, 148, 255, 100);
          border: 1px solid rgba(54, 148, 255, 100);
        }
        .setting {
          margin-left: 5px;
          margin-right: 5px;
        }
        .setting,
        .delete {
          display: none;
        }
        .flex_item:hover .setting,
        .flex_item:hover .delete {
          display: block;
        }
      }
    }
  }
  .main_center {
    margin: 15px 15px 0 21px;
    background: #fff;
    border: 1px solid #d7d7d7;
    min-height: 100px;
    padding: 20px;
    position: relative;
    display: table;
    content: '';
    clear: both;
    .table-container {
      max-height: 300px;
      overflow-y: scroll;
    }
    .table-container-th {
      padding-right: 10px;
      .indicator-title {
        min-width: 60px;
      }
    }
    table {
      font-size: 12px;
      td:nth-child(1) {
        min-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .machine-title-column {
        text-align: right;
      }
      .indicator-title {
        min-width: 55px;
        padding: 0 0.25em;
        text-align: center;
        span {
          display: inline-block;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          border-radius: 0.25em;
          margin: 0 2px;
          padding: 0.2em 0.6em 0.3em;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.main_content {
  padding: 20px;
  .chart_box {
    display: flex;
    flex-flow: column;
    height: 600px;

    border: 1px solid #ccc;
    margin-bottom: 20px;
    .box_filter_box {
      margin-top: 10px;
      display: flex;
      align-items: center;
      .box_filter {
        flex: 1;
      }
    }
    .box_title {
      color: #fff;
      background: #828282;
      font-size: 12px;
      padding: 20px;
      cursor: default;
    }
    .chart {
      flex: 1;
      height: 0;
    }
  }
}
</style>
